<template>
  <div class="home-index">
    <!-- 和普通标签的区别。并且这也是引入组件名字一个规范 -->
      <count-button v-bind:title="title1" :obj="{name: '章三'}" @tranVal="transmitVal"></count-button>
      
      <div>{{ transmitChild }}</div>
      <br />
      <button @click="changeVal">点击改变值</button>
  </div>
</template>
<script>
// import 引入组件的位置
import CountButton from "../../components/CountButton/CountButton.vue"
export default {
  components: {
    CountButton // 引入组件
  },
  // data 必须是一个函数。
  // 为什么
  // 因为当data 定义一个对象的时候，代表的是全局，因为vue脚手架，只实例化了一个new Vue。所以如果data是一个对象的话
  // 会污染其他组件。所以他是一个函数，表示当前的组件中的数据
  data(){
    return {
      title1: '111',
      transmitChild: ''
    }
  },
  methods: {
    changeVal() {
      this.title1 = "我改变了按钮上的文字"
    },
    transmitVal(a) {
      this.transmitChild = a;
    }
  }
}
</script>